<template>
  <div class="container">
    <router-link to="/setting" class="exit">设 置</router-link>
    <!-- tab -->
    <ul class="controller clearfix">
      <li
        class="controller-item"
        :class="{'item-active':tab_selected==item.tab}"
        v-for="(item, index) in tab_arr"
        :key="index"
        @click="toggle_tab(item)"
      >{{item.msg}}</li>
      <li class="controller-item style">`</li>
    </ul>
    <div class="content">
      <booking-list v-if="tab_selected==1"></booking-list>
      <pintuan v-if="tab_selected==2"></pintuan>
      <bill-search v-if="tab_selected==3"></bill-search>
      <write-off v-if="tab_selected==4"></write-off>
      <!-- <safety-beauty v-if="tab_selected==4"></safety-beauty> -->
      <data-analysis v-if="tab_selected==5"></data-analysis>
      <insurance v-if="tab_selected==6"></insurance>
      <traditional-form v-if="tab_selected==7"></traditional-form>
    </div>
  </div>
</template>
   
<script>
import bookingList from "@/components/booking/bookingList";
import pintuan from "@/components/pintuan/pintuan";
import billSearch from "@/components/bill/billSearch";
import dataAnalysis from "@/components/dataAnalysis/dataAnalysis";
import writeOff from "@/components/writeOff/writeOff";
import insurance from "@/components/Insurance/Insurance"
import traditionalForm from '@/components/traditionalForm/traditionalForm'
import  api from '../../assets/js/api'
export default {
  data () {
    return {
      tab_arr: [
        {
          msg: '预约单',
          tab: 1
        },
        {
          msg: '拼团',
          tab: 2
        },
        {
          msg: '流水单',
          tab: 3
        },
        {
          msg: '核销',
          tab: 4
        },
        {
          msg: '今日数据',
          tab: 5
        },
        {
          msg: '甄美保',
          tab: 6
        },
        {
          msg: '传统报单',
          tab: 7
        },
      ],
      tab_selected: 1
    };
  },
  methods: {
    toggle_tab (item) {
      this.tab_selected = item.tab;
      this.$router.push({ path: "/indexPage"});
    }
  },
  components: {
    // 预约列表组件
    bookingList,
    //拼团组件
    pintuan,
    // 流水单搜索组件
    billSearch,
    //核销
    writeOff,
    // 安心美
    // safetyBeauty,
    //今日数据
    dataAnalysis,
    // 甄美保
    insurance,
    // 传统报单
    traditionalForm
  },
  mounted () {
    this.axios.defaults.baseURL = api
    document.title = "美美咖驻院管家系统";
    console.log(api)
    // let str;
    // str = location.hash.split('=')[1]
    // this.tab_selected = location.hash.split('=')[1]
    // console.log(this.tab_selected)
  },
};
</script>

<style lang="less" scoped>
.cube-scroll-wrapper {
  overflow: scroll;
}
.container {
  height: 100%;
  width: 100%;
  .controller {
    height: 50px;
    width: 100%;
    display: flex;
    //解决flex切割有白线问题
    background: linear-gradient(
      180deg,
      rgba(255, 221, 221, 1),
      rgba(255, 131, 166, 1)
    );
    overflow-x: scroll;
    padding: 0 12px;
    .controller-item {
      // flex: 1;
      width: auto;
      display: block;
      line-height: 50px;
      text-align: center;
      color: #fff;
      font-size: 17px;
      background: linear-gradient(
        180deg,
        rgba(255, 221, 221, 1),
        rgba(255, 131, 166, 1)
      );
      // position: relative;
      border: none;
      outline: none;
      margin: 0 12px;
      white-space: nowrap;
    }
    .item-active {
      font-weight: bold;
      &::before {
        content: "";
        display: block;
        width: 0;
        height: 0;
        border-width: 0 10px 8px;
        border-style: solid;
        border-color: transparent transparent #fff; /*三角形*/
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
      }
    }
    .style {
      color: transparent;
    }
  }
  .content {
    width: 100%;
    height: 100%;
  }
  .exit {
    width: 50px;
    height: 50px;
    line-height: 50px;
    border-radius: 50%;
    background: linear-gradient(
      180deg,
      rgba(255, 221, 221, 1),
      rgba(255, 131, 166, 1)
    );
    text-align: center;
    color: #fff;
    font-size: 14px;
    position: fixed;
    bottom: 20px;
    right: 30px;
    z-index: 999;
  }
}
</style>


